<template>
  <div>
    <van-row class="header" type="flex" justify="start">
      <van-col span="24">
        <span class="title">全市疫情动态</span>
      </van-col>
    </van-row>
    <br>
      <van-row class="content" type="flex" justify="space-between">
        <van-col class="inner-box" span="5">
          <div class="num">{{dataList.diagnosis}}</div>
          <div class="explain">确诊人数</div>
        </van-col>
        <van-col class="inner-box" span="5">
          <div class="num">{{dataList.suspected}}</div>
          <div class="explain">疑似病例</div>
        </van-col>
        <van-col class="inner-box" span="5">
          <div class="num">{{dataList.die}}</div>
          <div class="explain">死亡人数</div>
        </van-col>
        <van-col class="inner-box" span="5">
          <div class="num">{{dataList.cure}}</div>
          <div class="explain">治愈人数</div>
        </van-col>
        <!--<van-col class="inner-box" span="5">
          <div class="num">{{dataList.normal}}</div>
          <div class="explain">正常人数</div>
        </van-col>-->
      </van-row>
    </div>
</template>

<script>
import { getAllIllnessStateNum } from '@/api/yi-qing-fang-kong'

export default {
  name: 'DataBar',
  data () {
    return {
      dataList: {
        diagnosis: null,
        suspected: null,
        die: null,
        cure: null
      }
    }
  },
  props: {
  },
  mounted () {
    this.chart()
  },
  methods: {
    chart () {
      getAllIllnessStateNum().then(ret => {
        if (ret.data.errcode === 0) {
          this.dataList = ret.data.data
        }
      })
    }
  }
}
</script>

<style scoped>
  .header {
    height: 30px;
  }

  .icon {
    font-size: 28px;
    font-weight: 600;
    margin-right: 5px;
  }

  .title {
    font-size: 12px;
    font-weight: 600;
    line-height: 30px;
  }
  .content {
    height: 50px;
  }
  .inner-box {
    /*background-color: lightblue;*/
    text-align: center;
  }
  .inner-box .num {
    font-size: 14px;
    color: #333333;
    margin: 5px 0px;
  }
  .inner-box .explain {
    background-color: #F1F1F1;
    border-radius: 3px;
    font-size: 12px;
  }
  .inner-box:nth-of-type(1) .num{
    color: #E55428;
  }
  .inner-box:nth-of-type(2) .num{
    color: #F3A94F;
  }
  .inner-box:nth-of-type(3) .num{
    color: #000000;
  }
  .inner-box:nth-of-type(4) .num{
    color: #088E81;
  }
</style>
